 <template>
   <Card :shadow="shadow">
     <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="">
      <div class="card-name">
        <div class="name width1">基本信息</div>
      </div>
      <div class="content-con margin">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="title">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户名称
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.title" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="select">
                <Row>
                  <i-col span="8" class="ban-left">
                    所属代理商
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.select" size="large">
                      <Option value="select1">请选择</Option>
                      <Option value="select2">【总经理】美</Option>
                      <Option value="select3">【总经理】test</Option>
                      <Option value="select4">【总经理】asdg</Option>
                      <Option value="select5">【商户代理】测试代理</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="username">
                <Row>
                  <i-col span="8" class="ban-left">
                    用户名
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.username" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="name">
                <Row>
                  <i-col span="8" class="ban-left">
                    真实姓名
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.name" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="rechargerate">
                <Row>
                  <i-col span="8" class="ban-left">
                    充值费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.rechargerate" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="fee">
                <Row>
                  <i-col span="8" class="ban-left">
                    转账单笔手续费(元/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.fee" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="tranrate">
                <Row>
                  <i-col span="8" class="ban-left">
                    转账费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.tranrate" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="smallpay">
                <Row>
                  <i-col span="8" class="ban-left">
                    最小代付金额(元/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.smallpay" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="bigpay">
                <Row>
                  <i-col span="8" class="ban-left">
                    最大代付金额(元/笔)号
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.bigpay" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="statu">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户状态
                  </i-col>
                  <i-col span="16">
                    <Radio-group v-model="formValidate.statu" size="large">
                      <Radio label="start">
                          <span>启用</span>
                      </Radio>
                      <Radio label="stop">
                          <span>停止</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12"
            v-for="(basic,index) in basicData"
            :key='basic.id'>
              <Row v-if="index == 1" style="padding-top: 15px;">
                <i-col span="8" class="ban-left">
                  {{basic.title}}
                </i-col>
                <i-col span="16">
                  <i-select size="large" :model.sync="model1" placeholder="请选择">
                    <i-option v-for="item in agentList" :value="item.label"></i-option>
                  </i-select>
                </i-col>
              </Row>
              <Row v-else-if="index == 9">
                <i-col span="8" class="ban-left">
                  {{basic.title}}
                </i-col>
                <i-col span="16">
                  <Radio-group :model.sync="status" style="padding: 8px 0 0 12px;">
                    <Radio size="large" value="启用"><span>启用</span></Radio>
                    <Radio size="large" value="停止"><span>停止</span></Radio>
                  </Radio-group>
                </i-col>
              </Row>
              <Row v-else-if="index == 0" style="padding-top: 15px;">
                <i-col span="8" class="ban-left">
                  {{basic.title}}
                </i-col>
                <i-col span="16">
                  <i-input :value.sync="basic.value" size="large" readonly></i-input>
                </i-col>
              </Row>
              <Row v-else-if="index == 2||index == 3||index == 4||index == 5" style="padding-top: 15px;">
                <i-col span="8" class="ban-left">
                  {{basic.title}}
                </i-col>
                <i-col span="16">
                  <i-input :value.sync="basic.value" size="large" :placeholder="basic.place"></i-input>
                </i-col>
              </Row>
              <Row v-else>
                <i-col span="8" class="ban-left">
                  {{basic.title}}
                </i-col>
                <i-col span="16">
                  <i-input :value.sync="basic.value" size="large" :placeholder="basic.place"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="card-name">
        <div class="name width1">安全信息</div>
      </div>
      <div class="content-con">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="google">
                <Row>
                  <i-col span="8" class="ban-left">
                    谷歌验证
                  </i-col>
                  <i-col span="16">
                    <Radio size="large" style="padding: 8px 0 0 12px;" v-model="formValidate.google" disabled>
                      未绑定
                    </Radio>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="login">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录安全类型
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.login" size="large">
                      <Option value="select1">仅登录密码验证</Option>
                      <Option value="select2">登录密码+谷歌组合验证</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="pay">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付安全类型
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.pay" size="large">
                      <Option value="select1">无需验证</Option>
                      <Option value="select2">仅支付密码验证</Option>
                      <Option value="select3">仅谷歌验证</Option>
                      <Option value="select4">支付密码+谷歌组合验证</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="loginpass">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录密码
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.loginpass" placeholder="若修改请输入新密码,8-16位的字母和数字组合" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="paypass">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付密码
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.paypass" placeholder="请输入新密码" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="loginwhite">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.loginwhite" size="large" type="textarea" :rows="4" placeholder="请输入登录白名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="loginblack">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.loginblack" size="large" type="textarea" :rows="4" placeholder="请输入登录黑名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="paywhite">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.paywhite" size="large" type="textarea" :rows="4" placeholder="请输入支付白名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="payblack">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.payblack" size="large" type="textarea" :rows="4" placeholder="请输入支付黑名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="replacewhite">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.replacewhite" size="large" type="textarea" :rows="4" placeholder="请输入代付白名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="replaceblack">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.replaceblack" size="large" type="textarea" :rows="4" placeholder="请输入代付黑名单,多个IP半角逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
        <div class="form-item">
          <Row :gutter="16">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  谷歌验证
                </i-col>
                <i-col span="16">
                  <Radio size="large" style="padding: 8px 0 0 12px;" :checked.sync="disabledSingle" disabled>未绑定</Radio>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
            </i-col>
          </Row>
          <Row :gutter="16" style="padding-top: 15px;">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  登录安全类型
                </i-col>
                <i-col span="16">
                  <i-select size="large" :model.sync="model2" placeholder="请选择">
                    <i-option v-for="item in loginList" :value="item.value">{{ item.label }}</i-option>
                  </i-select>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  支付安全类型
                </i-col>
                <i-col span="16">
                  <i-select size="large" :model.sync="model3" placeholder="请选择">
                    <i-option v-for="item in payList" :value="item.value">{{ item.label }}</i-option>
                  </i-select>
                </i-col>
              </Row>
            </i-col>
          </Row>
          <Row :gutter="16" style="padding-top: 15px;">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  登录密码
                </i-col>
                <i-col span="16">
                  <i-input size="large" placeholder="若修改请输入新密码,8-16位的字母和数字组合"></i-input>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  支付密码
                </i-col>
                <i-col span="16">
                  <i-input size="large" placeholder="请输入新密码"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
          <Row :gutter="16" style="padding-top: 15px;">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  登录IP白名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入登录白名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  登录IP黑名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入登录黑名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
          <Row :gutter="16" style="padding-top: 15px;">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  支付IP白名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入支付白名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  支付IP黑名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入支付黑名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
          <Row :gutter="16" style="padding-top: 15px;">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  代付IP白名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入代付白名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  代付IP黑名单
                </i-col>
                <i-col span="16">
                  <i-input size="large" type="textarea" :rows="4" placeholder="请输入代付黑名单,多个IP半角逗号分隔"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </div>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </div>
     </i-form>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'mer-edit',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       status:'启用',
       disabledSingle: true,
       formValidate:{
         title: '123',
         select: 'select1',
         username: 'qwe',
         name: 'dfgf',
         rechargerate: '0',
         fee: '1',
         tranrate: '0.6',
         smallpay: '1',
         bigpay: '10000',
         statu: 'start',

         google: true,
         login: '',
         pay: '',
         loginpass: '',
         paypass: '',
         loginwhite: '',
         loginblack: '',
         paywhite: '',
         payblack: '',
         replacewhite: '',
         replaceblack: ''
       },
       ruleValidate:{
         select:[
           {
             required: true,
             message: '请选择',
             trigger: 'blur'
           }
         ],
         username:[
           {
             required: true,
             message: '输入用户登录名',
             trigger: 'blur'
           }
         ],
         name:[
           {
             required: true,
             message: '输入真实姓名',
             trigger: 'blur'
           }
         ],
         rechargerate:[
           {
             required: true,
             message: '输入充值费率',
             trigger: 'blur'
           }
         ],
         fee:[
           {
             required: true,
             message: '输入代付每笔手续费',
             trigger: 'blur'
           }
         ],
         tranrate:[
           {
             required: true,
             message: '输入代付每笔转账费率',
             trigger: 'blur'
           }
         ],
         smallpay:[
           {
             required: true,
             message: '输入代付最小金额费',
             trigger: 'blur'
           }
         ],
         bigpay:[
           {
             required: true,
             message: '输入代付最大金额',
             trigger: 'blur'
           }
         ],
         statu:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ],
         login:[
           {
             required: true,
             message: '请选择',
             trigger: 'change'
           }
         ],
         pay:[
           {
             required: true,
             message: '请选择',
             trigger: 'change'
           }
         ],
         loginpass:[
           {
             required: true,
             message: '请输入登录密码',
             trigger: 'blur'
           }
         ],
         paypass:[
           {
             required: true,
             message: '请输入新密码',
             trigger: 'blur'
           }
         ],
         loginwhite:[
           {
             required: true,
             message: '请输入登录白名单',
             trigger: 'blur'
           }
         ],
         loginblack:[
           {
             required: true,
             message: '请输入登录黑名单',
             trigger: 'blur'
           }
         ],
         paywhite:[
           {
             required: true,
             message: '请输入支付白名单',
             trigger: 'blur'
           }
         ],
         payblack:[
           {
             required: true,
             message: '请输入支付黑名单',
             trigger: 'blur'
           }
         ],
         replacewhite:[
           {
             required: true,
             message: '请输入代付白名单',
             trigger: 'blur'
           }
         ],
         replaceblack:[
           {
             required: true,
             message: '请输入代付黑名单',
             trigger: 'blur'
           }
         ]
        },
       basicData:[
         {
           title: '商户名称',
           value: '123',
         },
         {
           title: '所属代理商',
           value: ''
         },
         {
           title: '用户名',
           value: 'qwe',
           place: '输入用户登录名'
         },
         {
           title: '真实姓名',
           value: 'dfgf',
           place: '输入真实姓名'
         },
         {
           title: '充值费率(%)',
           value: '0',
           place: '输入充值费率'
         },
         {
           title: '转账单笔手续费(元/笔)',
           value: '1',
           place: '输入代付每笔手续费'
         },
         {
           title: '转账费率(%)',
           value: '0.6',
           place: '输入代付每笔转账费率'
         },
         {
           title: '最小代付金额(元/笔)',
           value: '1',
           place: '输入代付最小金额费'
         },
         {
           title: '最大代付金额(元/笔)号',
           value: '10000',
           place: '输入代付最大金额'
         },
         {
           title: '商户状态',
           value: ''
         }
       ],
       model1: '',
       model2: '',
       model3: '',
       agentList: [
         {
           value: 'beijing',
           label: '请选择'
         },
         {
           value: 'beiing',
           label: '【总经理】美'
         },
         {
           value: 'shenzhen',
           label: '【总经理】test'
         },
         {
           value: 'hangzhou',
           label: '【总经理】asdg'
         },
         {
           value: 'nanjing',
           label: '【商户代理】测试代理'
         }
       ],
       loginList: [
         {
           value: 'beijing',
           label: '仅登录密码验证'
         },
         {
           value: 'ing',
           label: '登录密码+谷歌组合验证'
         }
       ],
       payList: [
         {
           value: 'being',
           label: '无需验证'
         },
         {
           value: 'bng',
           label: '仅支付密码验证'
         },
         {
           value: 'shenzhen',
           label: '仅谷歌验证'
         },
         {
           value: 'hangzhou',
           label: '支付密码+谷歌组合验证'
         }
       ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'merchants'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
     .margin{
       margin-bottom: 20px !important;
     }
 </style>
